<%--
    Date: 2024-05-22
    选择授课科目查看相应的学生成绩。编辑并保存学生成绩。
    teacherGrades.jsp
    └── 提交成功 --> teacherHome.jsp
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/teacherGrades.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/updateTime.js"></script>
    <title>教师-学生成绩管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background: url('${pageContext.request.contextPath}/resources/img/bg-HYL.jpg') no-repeat center center fixed;
            background-size: cover;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            position: relative;
        }
    </style>
</head>
<body>
<div class="overlay"></div>
<div class="top-bar">
    <span id="currentTime"></span>
</div>
<div class="container main-content">
    <h1 class="text-center mt-4 mb-4">成绩录入</h1>
    <div class="form-group">
        <label for="subjectSelect">选择科目:</label>
        <select id="subjectSelect" class="form-control">
            <option value="">选择一个科目</option>
            <c:forEach items="${subjects}" var="subject">
                <option value="${subject.subjectId}">${subject.subjectName}</option>
            </c:forEach>
        </select>
    </div>

    <h2 id="subjectName" class="text-center mt-4 mb-4"></h2>
    <table id="scoresTable" class="table table-striped table-bordered table-custom">
        <thead>
        <tr>
            <th>学生ID</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <h2 class="text-center mt-4 mb-4">新增学生成绩</h2>
    <form id="addGradeForm">
        <div class="form-group">
            <label for="studentId">学生ID:</label>
            <input type="text" class="form-control" id="studentId" name="studentId" required>
        </div>
        <div class="form-group">
            <label for="grade">成绩:</label>
            <input type="text" class="form-control" id="grade" name="grade" required>
        </div>
        <button type="submit" class="text-center btn btn-primary">新增成绩</button>
    </form>
    <div class="text-center mt-3">
        <a href="<c:url value='/teachers/'/>" class="btn btn-secondary">返回教师主页</a>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#subjectSelect').change(function() {
            var subjectId = $(this).val();
            if (subjectId) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/teachers/' + ${teacher.userId} + '/subjects/' + subjectId + '/grades',
                    method: 'GET',
                    success: function(data) {
                        $('#scoresTable tbody').empty();
                        $.each(data, function(index, grade) {
                            var row = '<tr>' +
                                '<td>' + grade.studentId + '</td>' +
                                '<td><input type="text" class="form-control grade-input" data-student-id="' + grade.studentId + '" value="' + grade.grade + '" readonly></td>' +
                                '</tr>';
                            $('#scoresTable tbody').append(row);
                        });
                    }
                });
            } else {
                $('#scoresTable tbody').empty();
            }
        });

        $('#addGradeForm').submit(function(event) {
            event.preventDefault();
            var newGrade = {
                studentId: $('#studentId').val(),
                grade: $('#grade').val(),
                subjectId: $('#subjectSelect').val()
            };

            $.ajax({
                url: '${pageContext.request.contextPath}/teachers/grades/add',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(newGrade),
                success: function(response) {
                    alert('新增成绩成功！');
                    // 重新加载成绩表
                    $('#subjectSelect').change();
                }
            });
        });
    });
</script>
</body>
</html>
